<template>
  <el-table :data="productArr">
    <el-table-column prop="proname" label="商品名称" width="240" />
    <el-table-column prop="originprice" label="商品价格" width="120" />
    <el-table-column label="操作">
      <template #default="scope">
        <!-- scope 是一个对象 ，对象row属性--数组中每一个元素   $index 这个元素对应的下标-->
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"> Edit </el-button>
        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { productListReq } from '@/api/product'
import { ref } from 'vue'

interface IProductObj {
  proname: string
  originprice: number
}

const pageNum = 1
const pageSize = 10
// ref<泛型> 限制的是ref函数参数的类型和 返回值.value属性的类型

// IProductObj[] 数组的元素必须是 这个类型 IProductObj
const productArr = ref<IProductObj[]>([])

productListReq(pageNum, pageSize).then((r) => {
  console.log(r.data)
  productArr.value = r.data.data
})

function handleEdit(index: number, row: IProductObj) {
  console.log(index)
  console.log(row)
  console.log(row.proname)
  // row.aa
}
function handleDelete(index, row) {}
</script>
<style lang="css" scoped></style>
